<template>
  <div class="index-container">
    <el-button type="primary" size="mini" @click="exportDataEvent">导出</el-button>
    <vxe-table ref="table" :data="datas" :border="true" stripe size="mini" resizable :loading="loading"
      :height="tableHeight" highlight-hover-row highlight-current-row style="width: 100%;margin-top:5px">
      <vxe-column v-for="(item,index) in columns" :key="item.id" :field="item" :title="item" width="120" align="center"
        header-align="center" show-overflow show-header-overflow>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
  import * as api from '@/api/coder/report'

  export default {
    name: 'report_scan',
    data() {
      return {
        tableHeight: 0,
        fullHeight: document.documentElement.clientHeight,
        params: '',
        id: '',
        columns: [],
        datas: [],
        loading: true
      }
    },
    watch: {
      columns: function() {
        this.$nextTick(() => {
          this.getList();
          this.tableHeight = this.fullHeight - 280;
        });
      },
      fullHeight: function() {
        this.tableHeight = this.fullHeight - 280;
      },
    },
    created() {
      this.params = this.$route.query.params
      this.id = this.$route.query.id
      this.getColumns();
    },
    methods: {
      getColumns() {
        api.getColumns(this.id).then(res => {
          this.columns = res.report.r_column.split(",")
        })
      },
      getList() {
        api.getList(this.id, this.params).then(res => {
          this.datas = res;
          this.loading = false;
        })
      },
      exportDataEvent() {
        api.reportExport(this.id, this.params).then(res => {
          location.href = res.url
        })
      },
    }
  }
</script>

<style></style>
